<!--
  角色表单标签页组件 - 在tabs模式中显示角色表单
  @usage 在CommonContainer组件的tabs模式中使用
  @path /components/system/role/RoleFormTab.vue
  @related components/common/CommonContainer.vue
-->
<template>
  <div class="role-form-tab">
    <!-- 表单标题 -->
    <div class="form-header">
      <h3 class="form-title">{{ formTitle }}</h3>
      <p class="form-description">{{ formDescription }}</p>
    </div>
    
    <!-- 表单内容 -->
    <div class="form-content">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="120px"
        class="role-form"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input
            v-model="formData.roleName"
            placeholder="请输入角色名称"
            maxlength="50"
            show-word-limit
            clearable
          />
        </el-form-item>

        <el-form-item label="角色编码" prop="roleCode">
          <el-input
            v-model="formData.roleCode"
            placeholder="请输入角色编码"
            maxlength="50"
            :disabled="mode === 'edit'"
            clearable
          />
        </el-form-item>

        <el-form-item label="角色描述" prop="description">
          <el-input
            v-model="formData.description"
            type="textarea"
            :rows="4"
            placeholder="请输入角色描述"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="角色状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 表单操作按钮 -->
        <el-form-item>
          <el-button type="primary" @click="handleSubmit" :loading="submitting">
            {{ mode === 'add' ? '创建角色' : '更新角色' }}
          </el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { 
  ref, 
  reactive, 
  computed, 
  watch, 
  onBeforeMount, 
  onMounted, 
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  nextTick 
} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 组件名称
defineOptions({
  name: 'RoleFormTab'
})

// 属性定义
const props = defineProps({
  // 表单模式：'add' 或 'edit'
  mode: {
    type: String,
    default: 'add',
    validator: (value) => ['add', 'edit'].includes(value)
  },
  // 角色ID（编辑模式使用）
  roleId: {
    type: [String, Number],
    default: null
  },
  // 角色数据（编辑模式使用）
  roleData: {
    type: Object,
    default: () => ({})
  },
  // 表单可见性
  visible: {
    type: Boolean,
    default: false
  }
})

// 事件定义
const emit = defineEmits([
  'update:visible',
  'success',
  'close',
  'cancel'
])

// 响应式变量声明（按照模板中的顺序）
const formRef = ref()
const submitting = ref(false)

// 响应式对象
const formData = reactive({
  roleName: '',
  roleCode: '',
  description: '',
  status: 1
})

// 计算属性
const formTitle = computed(() => {
  return props.mode === 'add' ? '新增角色' : '编辑角色'
})

const formDescription = computed(() => {
  return props.mode === 'add' 
    ? '请填写角色基本信息，创建新的系统角色' 
    : '请修改角色信息，更新系统角色配置'
})

// 表单验证规则
const formRules = reactive({
  roleName: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
    { min: 2, max: 50, message: '角色名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  roleCode: [
    { required: true, message: '请输入角色编码', trigger: 'blur' },
    { min: 2, max: 50, message: '角色编码长度在 2 到 50 个字符', trigger: 'blur' },
    { pattern: /^[A-Z_][A-Z0-9_]*$/, message: '角色编码只能包含大写字母、数字和下划线，且以字母或下划线开头', trigger: 'blur' }
  ],
  description: [
    { max: 200, message: '角色描述长度不能超过 200 个字符', trigger: 'blur' }
  ],
  status: [
    { required: true, message: '请选择角色状态', trigger: 'change' }
  ]
})

// 响应函数声明（按照模板中的顺序）
/**
 * 处理表单提交
 */
const handleSubmit = async () => {
  try {
    // 表单验证
    const valid = await formRef.value?.validate()
    if (!valid) {
      return
    }
    
    submitting.value = true
    
    // 模拟异步提交
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 构建提交数据
    const submitData = {
      ...formData,
      id: props.mode === 'edit' ? props.roleId : Date.now(),
      createTime: props.mode === 'edit' ? props.roleData.createTime : new Date().toLocaleString('zh-CN'),
      updateTime: new Date().toLocaleString('zh-CN')
    }
    
    // 发送成功事件
    emit('success', {
      mode: props.mode,
      data: submitData
    })
    
    ElMessage.success(props.mode === 'add' ? '角色创建成功' : '角色更新成功')
    
    // 重置表单
    resetForm()
    
  } catch (error) {
    console.error('表单提交失败:', error)
    ElMessage.error('操作失败，请重试')
  } finally {
    submitting.value = false
  }
}

/**
 * 处理表单重置
 */
const handleReset = () => {
  resetForm()
  ElMessage.info('表单已重置')
}

/**
 * 处理取消操作
 */
const handleCancel = () => {
  // 检查表单是否有修改
  const isFormDirty = checkFormDirty()
  
  if (isFormDirty) {
    ElMessageBox.confirm('表单有未保存的修改，确定要取消吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '继续编辑',
      type: 'warning'
    }).then(() => {
      resetForm()
      emit('cancel')
    }).catch(() => {
      // 用户选择继续编辑
    })
  } else {
    emit('cancel')
  }
}

/**
 * 重置表单数据
 */
const resetForm = () => {
  // 清除表单验证
  formRef.value?.clearValidate()
  
  // 重置表单数据
  if (props.mode === 'add') {
    Object.assign(formData, {
      roleName: '',
      roleCode: '',
      description: '',
      status: 1
    })
  } else {
    // 编辑模式，恢复原始数据
    if (props.roleData) {
      Object.assign(formData, {
        roleName: props.roleData.roleName || '',
        roleCode: props.roleData.roleCode || '',
        description: props.roleData.description || '',
        status: props.roleData.status ?? 1
      })
    }
  }
}

/**
 * 初始化表单数据
 */
const initFormData = () => {
  if (props.mode === 'edit' && props.roleData) {
    Object.assign(formData, {
      roleName: props.roleData.roleName || '',
      roleCode: props.roleData.roleCode || '',
      description: props.roleData.description || '',
      status: props.roleData.status ?? 1
    })
  } else {
    Object.assign(formData, {
      roleName: '',
      roleCode: '',
      description: '',
      status: 1
    })
  }
}

/**
 * 检查表单是否有修改
 */
const checkFormDirty = () => {
  if (props.mode === 'add') {
    return formData.roleName || formData.roleCode || formData.description
  } else {
    // 编辑模式下比较当前数据和原始数据
    return formData.roleName !== (props.roleData.roleName || '') ||
           formData.roleCode !== (props.roleData.roleCode || '') ||
           formData.description !== (props.roleData.description || '') ||
           formData.status !== (props.roleData.status ?? 1)
  }
}

// 样式函数声明
/**
 * 表单数据验证
 */
const validateForm = () => {
  return formRef.value?.validate()
}

/**
 * 获取表单数据
 */
const getFormData = () => {
  return { ...formData }
}

// 监听属性变化
watch(() => props.mode, () => {
  initFormData()
}, { immediate: true })

watch(() => props.roleData, () => {
  if (props.mode === 'edit') {
    initFormData()
  }
}, { deep: true })

// 生命周期钩子
onBeforeMount(() => {
  console.log('角色表单标签页组件即将挂载')
})

onMounted(() => {
  initFormData()
  console.log('角色表单标签页组件已挂载')
})

onBeforeUpdate(() => {
  // 组件更新之前执行的逻辑
  nextTick(() => {
    // 在DOM更新之后执行的逻辑
  })
})

onUpdated(() => {
  // 组件更新之后执行的逻辑
})

onBeforeUnmount(() => {
  // 组件卸载前执行的逻辑
  console.log('角色表单标签页组件即将卸载')
})

onUnmounted(() => {
  // 组件卸载后执行的逻辑
})

onErrorCaptured((err, instance, info) => {
  // 捕获来自后代组件的错误
  console.error('角色表单标签页组件错误:', err, info)
  return false // 阻止错误继续向上传播
})

// 暴露方法给父组件
defineExpose({
  validateForm,
  getFormData,
  resetForm
})
</script>

<style lang="less" scoped>
.role-form-tab {
  height: 100%;
  padding: 24px;
  background-color: #fff;
  overflow-y: auto;
  
  // 表单头部样式
  .form-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9ecef;
    
    .form-title {
      font-size: 20px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
    }
    
    .form-description {
      font-size: 14px;
      color: #666;
      margin: 0;
    }
  }
  
  // 表单内容样式
  .form-content {
    .role-form {
      max-width: 600px;
      
      :deep(.el-form-item) {
        margin-bottom: 20px;
      }
      
      :deep(.el-form-item__label) {
        font-weight: 500;
        color: #333;
      }
      
      :deep(.el-input__wrapper) {
        border-radius: 6px;
      }
      
      :deep(.el-textarea__inner) {
        border-radius: 6px;
      }
      
      :deep(.el-radio) {
        margin-right: 20px;
      }
      
      .el-form-item:last-child {
        margin-top: 32px;
        padding-top: 20px;
        border-top: 1px solid #e9ecef;
        
        .el-button {
          margin-right: 12px;
          border-radius: 6px;
          
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>